<template>
	<view class="pending">
		<navBar title="带货详情"></navBar>
		<view class="header flex_center">
			<view class="item">
				<text>销售量(单)</text>
				<view>{{data.order_num || 0}}</view>
			</view>
			<view class="item">
				<text>销售额(元)</text>
				<view>{{data.price || '0.00'}}</view>
			</view>
			<view class="item">
				<text>佣金</text>
				<view class="red">{{data.cps_ratio || '推广中'}}</view>
			</view>
		</view>

		<view class="table">
			<view class="title flex_center">
				<view class="th flex_r_around">
					带货达人
				</view>
				<view class="th flex_r_around">
					销售量(单)
				</view>
				<view class="th flex_r_around">
					销售金额(元)
				</view>
				<view class="th flex_r_around">
					佣金(元)
				</view>
			</view>
			
			<view style="background: #FFF;" v-if="!exper.length">
				<empty></empty>
			</view>
			<view class="tr flex_center" v-for="(item,index) in exper" :key="index">
				<view class="td flex_r_around" @click="$native.toUser(item.provider_id)">
					<image :src="item.avatar" mode="aspectFill"></image>
				</view>
				<view class="td flex_r_around">
					<text>{{item.order_num || 0}}</text>
				</view>
				<view class="td flex_r_around">
					<text>{{item.order_price || '0.00'}}</text>
				</view>
				<view class="td flex_r_around">
					<text>{{item.rec_show == 0 ? '推广中' : item.rec_show == 1 ? '推广中' : item.brokerage}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			navBar,
			empty
		},
		data() {
			return {
				data: {},

				exper: [],
				experPage: 1,
				experTotal: 0,
			}
		},
		methods: {
			getInfo() {
				this.$get('/popularize/getSellGoodsEredar', {
					id: this.data.id,
					page: this.experPage,
				}).then(res => {
					this.experTotal = res.data.total;
					this.exper.push(...res.data.data);
				})
			}
		},

		onLoad(option) {
			if (option.data) {
				this.data = JSON.parse(option.data);
				this.getInfo();
			}
		},

		onReachBottom() {
			if (this.experTotal > this.exper.length) {
				this.experPage++;
				this.getInfo();
			}
		},

		onPullDownRefresh() {
			this.experPage = 1;
			this.$get('/popularize/getSellGoodsEredar', {
				id: this.data.id,
				page: this.experPage,
			}).then(res => {
				uni.stopPullDownRefresh();
				this.exper = [];
				this.experTotal = res.data.total;
				this.exper.push(...res.data.data);
			})
		}
	}
</script>

<style lang="less" scoped>
	.pending {
		padding: 24rpx;
	}

	.header {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 30rpx;
		margin-bottom: 16rpx;

		.item {
			flex: 1;
			overflow: hidden;

			text {
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}

			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #000000;
			}

			.red {
				color: #FD2A53;
				font-size: 32rpx;
			}
		}
	}

	.table {
		border-radius: 24rpx;
		overflow: hidden;

		.title {
			.th {
				height: 64rpx;
				background: #FFEAEE;
				flex: 1;
				background: #FFEAEE;
				border-bottom: 2rpx solid #EDEDED;
				border-right: 2rpx solid #EDEDED;
				font-size: 28rpx;
				line-height: 64rpx;
				color: #131313;
			}
		}

		.tr {
			.td {
				flex: 1;
				height: 96rpx;
				background: #FFFFFF;
				border-bottom: 2rpx solid #EDEDED;
				border-right: 2rpx solid #EDEDED;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
				}

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 32rpx;
					color: #EDEDED;
				}
			}
		}
	}
</style>